<template>
      <div>
            <div class="col-xs-12" v-for="index in prodNum" :key="index">
                  <div class="input-group">
                        <input type="text" class="form-control input-sm" :placeholder="title[index]" :style="{'backgroundColor':prodInputColor}" 
                              @change="changeProdName(index,$event)" :value="getProdName(index)">
                        <span class="input-group-btn">
                              <input class="btn btn-default btn-sm" type="button" style="width:100px;" @click="showModule" :value="buttonName"/>
                        </span>
                  </div> 
            </div>
      </div>
</template>
<script>
/*
#####DATA
prod:{name:[],value:[]},
companyRes:"0001",
mast:{mastType:"company",mastClass:"0000"},
prodInputNum:3 //默认显示几个框
prodChooseNum:10 //最多选择几个
isfav:{prod:false,jan:false}  //收藏赋值标记位

###调用
<div class="row">
<prodGroupComponent :prodObj="goodsObj.prod" :company="companyValue" :goodsMast="goodsMast" :prodInputNum="5" :isfav="$attrs.collectFlag" :prodChooseNum="50"></prodGroupComponent>
</div>
*/
import prodGrp from 'prodGrp';
export default {
      name:'prodGroupComponent',
      props:{
            //{name:["a","b","c"],value[[],[],[]]}
            prodObj:{
                  type:Object
            },
            //{mastType："suntory/company",mastClass:""}
            goodsMast:{
                  type:Object
            },
            prodChooseNum:{
                  type:Number,
                  default:function(){
                        return 10;
                  }
            },
            prodInputNum:{
                  type:Number,
                  default:function(){
                        return 5;
                  }
            },
            company:{
                  type:String
            },
            isfav:{
                  type:Object
            }
      },
      data:function(){
            return {
                  prodNum:this.prodInputNum,
                  prodGroup:new prodGrp(window.$),
                  buttonName:'商品選択',
                  prodInputColor:'',
                  title:['','グループA','グループB','グループC','グループD','グループE',
                  'グループF','グループG','グループH','グループI','グループJ',
                  'グループK','グループL','グループM','グループN','グループO',
                  'グループP','グループQ','グループR','グループS','グループT',
                  'グループU','グループV','グループW','グループX','グループY',
                  'グループZ','グループAB','グループAC','グループAD','グループAE',
                  'グループAF','グループAG','グループAH','グループAI','グループAJ',
                  'グループAK','グループAL','グループAM','グループAN','グループAO',
                  'グループAK','グループAL','グループAM','グループAN','グループAO',
                  'グループAO','グループAQ','グループAR','グループAS','グループAT',
                  'グループAU','グループAV','グループAW','グループAX','グループAY',
                  'グループAZ','グループBA','グループBC','グループBD'],
                  inputClickIndex:1,
                  mastTypeBak:'',
                  mastClassBak:''
            };
      },
      computed:{
            getProdName(){
                  var vm  = this;
                  return function(index){
                        if(vm.prodObj.name[index-1] === ''){
                              return undefined;
                        }else{
                            return  vm.prodObj.name[index-1];
                        }
                  };
            },
            listenChange () {
                  const {company,prodObj,goodsMast} = this;
                  return {company,prodObj,goodsMast};
            }
      },
      watch:{
            listenChange(newValue,oldValue){
                  var vm = this;
                  var initFlag = true;
                  if(!this.isfav.prod){
                        if(newValue.company === oldValue.company 
                        && newValue.goodsMast.type === oldValue.goodsMast.type 
                        && newValue.goodsMast.value === oldValue.goodsMast.value){
                              return;
                        }
                        if(newValue.goodsMast.type === oldValue.goodsMast.type 
                        && newValue.goodsMast.value === oldValue.goodsMast.value
                        && newValue.goodsMast.type === 'suntory' ){
                              //suntory下仅有企业发生变更，商品条件不应变化
                              return;
                        }
                        this.prodNum = this.prodInputNum;
                        this.mastTypeBak = '';
                        this.prodObj.value = [];
                        this.prodObj.name = [];
                  }else{
                        this.prodNum = this.prodObj.value.length;
                        this.isfav.prod = false;
                        
                  }
                  if(initFlag){
                        this.initProdGroup(vm.prodGroup.setProdsGrp(vm.prodObj.value));
                        this.$emit('resetModule');
                        if(this.prodObj.value.length > 0 && this.prodObj.value[0].length > 0 ){
                              this.buttonName = '選択済み';
                              this.prodInputColor = '#BBFFFF';
                              this.prodNum = this.prodObj.value.length;
                        }else{
                              this.buttonName = '商品選択';
                              this.prodInputColor = '';
                              this.prodNum = this.prodInputNum;
                        }
                  }
                  this.mastTypeBak = this.goodsMast.type;
                  this.mastClassBak = this.goodsMast.value;
            }
      },
      methods:{
            initProdGroup(callback){
                  var vm = this;
                  this.buttonName='商品選択';
                  this.prodInputColor='';
                  var initParam = {
                        usercd: global.userCd,
                        elementId: 'prodModule',
                        level: 'l-m-s-t',
                        sakeflg:'0',
                        maxgrp:this.prodChooseNum
                  };
                  if(this.goodsMast.type === 'suntory'){
                        initParam.mstclass = this.goodsMast.value;
                        initParam.kigyoucd = global.suntoryCd;
                  }else{
                        initParam.mstclass = '0000';
                        initParam.kigyoucd = this.company;
                  }
                  initParam.callback={
                        afterSelectedOK:function(){
                              vm.prodObj.value = vm.prodGroup.getProdsGrp();
                              vm.prodObj.name = vm.prodGroup.getProdsGrpName();
                              var selectProdNum = vm.prodObj.value.length;
                              vm.prodNum = selectProdNum === 0 ? vm.prodInputNum : selectProdNum;
                              if(vm.prodGroup.getProdsGrp().length > 0 ){
                                   vm.buttonName = '選択済み';
                                   vm.prodInputColor = '#BBFFFF';
                                   var prodNameArr = [];
                                   var nameArray = vm.prodGroup.getProdsGrpName();
                                   for(var item of nameArray){
                                         prodNameArr.push(item.length > 1 ? item.join(','):item.join(''));
                                   }
                                   vm.prodObj.name = prodNameArr;
                              }else{
                                    vm.buttonName = '商品選択';
                                    vm.prodInputColor = ''; 
                              }
                        }
                  };
                  if(callback !== undefined && callback !== null){
                        initParam.callback.afterInit = callback;
                  }
                  vm.prodGroup.init(initParam);
            },
            changeProdName(index,event){
                  var name = event.target.value;
                  if(name !== '' && name.trim() !== '' && name != null && name != undefined){
                        this.$set(this.prodObj.name,index-1,name);
                  }else{
                        if(this.prodObj.value[index-1].length > 0 ){
                              this.prodObj.name[index-1] = this.title[index];
                        } 
                  }
            },
            showModule(){
                  this.prodGroup.setProdsGrp(this.prodObj.value);
                  this.prodGroup.show();
            }
      },
      mounted(){
            var vm = this;
            var prodTimeIn = window.setInterval(function(){
                  if(vm.prodObj !== undefined){
                        vm.prodObj.name = new Array(vm.prodInputNum);
                        for (var index = 0; index < vm.prodInputNum; index++) {
                             vm.prodObj.name.push(vm.title[index+1]);
                        }
                        vm.prodObj.value = new Array(vm.prodInputNum).fill([]);
                        vm.initProdGroup();
                        clearInterval(prodTimeIn);
                  }
            },300);
      }
};
</script>